<template>
  <view class="wrap">
    <view class="title">
      <view class="line"></view>
      <text>数据同步</text>
    </view>
    <view class="equal" @tap="toSelectBind">
      <view class="text">
        <view class="equal-icon">
          <image class="equal-img" src="https://ainengli.meilianshuke.com/jkhx/common/huawei.png" />
        </view>
        华为运动健康
      </view>
      <image class="img-more" src="https://ainengli.meilianshuke.com/jkhx/raozg/black_more.png" />
    </view>
    <view class="title">
      <view class="line"></view>
      <text>绑定智能设备</text>
    </view>
    <view class="equipment-grid" @tap="gridHandle('analysis')">
      <image
        v-if="equipmentData.deviceNo"
        class="equipment-binding-icon"
        src="https://ainengli.meilianshuke.com/jkhx/common/binding.png"
        mode="scaleToFill"
      />
      <image
        class="equipment-image"
        src="https://ainengli.meilianshuke.com/jkhx/common/viva.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">微策三合一分析仪</text>
        <text class="desc" v-if="equipmentData.idCode">SN:{{ equipmentData.idCode }}</text>
      </view>
    </view>
    <!-- <view class="equipment-grid" @tap="gridHandle('fatSacle')">
      <image
        class="equipment-image"
        src="https://ainengli.meilianshuke.com/jkhx/common/fat-sacle.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">体脂秤</text>
        <view class="toBind">
          去绑定
          <image
            class="img-more"
            src="https://ainengli.meilianshuke.com/jkhx/raozg/green_more.png"
          />
        </view>
      </view>
    </view> -->
    <!-- <view class="equipment-grid" @tap="gridHandle('hematomanometer')">
      <image
        class="equipment-image"
        src="https://ainengli.meilianshuke.com/jkhx/common/hematomanometer.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">血压计</text>
        <view class="toBind">
          去绑定
          <image
            class="img-more"
            src="https://ainengli.meilianshuke.com/jkhx/raozg/green_more.png"
          />
        </view>
      </view>
    </view> -->
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getEquipmentStatus } from './equipment.api'
import { onShow } from '@dcloudio/uni-app'
import type { equipmentDataModel } from './equipmentModel'
import { queryByKey, huawei_patient, getTokenStatus } from '@/module/api/HUAWEI'

const equipmentData = ref<equipmentDataModel>({
  deviceName: '',
  deviceNo: '',
  deviceType: '',
  userId: '',
  idCode: ''
})
const userInfo = ref({})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  getInfo()
})

const getInfo = () => {
  getEquipmentStatus({ deviceType: 'WEICE_ANALYSER' }).then((res: any) => {
    if (res.data) {
      equipmentData.value = res.data
    }
  })
}
const gridHandle = (name: string) => {
  if (equipmentData.value.deviceNo && name === 'analysis') {
    uni.redirectTo({
      url: `/module/src/pages/myEquipment/detail?name=${name}&deviceNo=${equipmentData.value.deviceNo}`
    })
  } else {
    if (name === 'analysis') {
      uni.navigateTo({
        url: `/module/src/pages/myEquipment/binding?name=${name}`
      })
    } else {
      uni.scanCode({
        success: (res: any) => {
          uni.showToast({
            title: '绑定失败',
            icon: 'error'
          })
        },
        complete: () => {
          // uni.showToast({
          //   title: '绑定失败',
          //   icon: 'error'
          // })
          // setTimeout(() => {
          //   uni.navigateBack()
          // }, 1500)
        }
      })
      // uni.navigateTo({
      //   url: `/module/src/pages/myEquipment/sacnCode`
      // })
    }
  }
}
const toSelectBind = () => {
  getTokenStatus({ userId: userInfo.value.userId }).then((res) => {
    console.log('结果', res)
    if (res && res.data) {
      uni.navigateTo({
        url: '/module/src/pages/myEquipment/authorize_list'
      })
    } else {
      uni.navigateTo({
        url: '/module/src/pages/myEquipment/authorize'
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 34rpx 32rpx;
}

.title {
  margin-bottom: 24rpx;
  font-weight: 700;
  font-size: 32rpx;
  color: #222222;
  display: flex;
  .line {
    width: 8rpx;
    height: 32rpx;
    border-radius: 0 4rpx 4rpx 0;
    background: #00d1b6;
    margin-right: 16rpx;
    transform: translateY(4rpx);
  }
}

.equal {
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 32rpx;
  color: #1d2129;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 48rpx;
  .text {
    display: flex;
    align-items: center;
  }
  .equal-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 8rpx;
    margin-right: 24rpx;
    padding: 8rpx 8rpx 10rpx;
    box-sizing: border-box;
    border: 1rpx solid #e5e6eb;
    .equal-img {
      width: 48rpx;
      height: 46rpx;
    }
  }
  .img-more {
    width: 32rpx;
    height: 32rpx;
  }
}

.equipment-grid {
  position: relative;
  display: flex;
  // align-items: center;
  width: 100%;
  height: 208rpx;
  padding: 24rpx 32rpx;
  margin-bottom: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.equipment-binding-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 48rpx;
}

.equipment-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 24rpx;
}

.equipment-text {
  display: flex;
  flex-direction: column;

  .name {
    margin-bottom: 24rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #1d2129;
  }
  .toBind {
    font-weight: 400;
    font-size: 28rpx;
    color: #00d1b6;
  }
  .img-more {
    width: 32rpx;
    height: 32rpx;
    transform: translateY(6rpx);
  }

  .desc {
    font-size: 24rpx;
    font-weight: 400;
    color: #999;
  }
}
</style>
